<template>
  <div>
    <!-- life 生命周期函数  vue实例 从创建到销毁过程 会分别自动触发不同函数 这些函数 就叫做生命周期函数  也叫作生命周期钩子-->

  </div>
</template>

<script>
export default {
  data(){
    return{
val:"11",
    }
  },
    beforeCreate(){
      //vue 实例 创建之前出触发  
      console.log(this.val); //无法访问data中定义的变量 
      
      console.log('vue实例创建之前出触发');
      
    },
    created(){
      //vue实例创建成功之后触发
      //一般会写一些当前页面打开就需要执行的方法 例如     发起请求
      console.log('vue实例创建成功之后触发');
    },
    beforeMount(){
      //视图层编译之前触发
      //视图层 就是页面 就是Dom节点
      //这里不建议操作节点 可能在这里还没有渲染完毕
      console.log('视图层编译之前触发');
    },
    mounted(){
      //图层编译成功之后触发
      //虽然大部分分情况不操作真实节点 但是 有的时候也是无法避免的 比如操作使用 echarts 因为插件需要传入节点 所以当需要获取节点时 应该在当前生命周期去获取
      console.log('视图层编译成功之后触发');
    },
    beforeUpdate(){
      //数据更新之前触发
      console.log('数据更新之前触发');
    },
    updated(){
      //数据更新之后触发
      console.log('数据更新之后触发');
    },
    beforDestroy(){
      //vue 实例销毁之前触发
      console.log('vue实例销毁之前触发');
    },
    dastroyed(){
      //vue 实例销毁之后触发
      console.log('vue实例销毁之后触发');
    },
    //生命周期函数（生命周期钩子） 包含以上八个阶段 每次进入阶段都会触发相应函数
}
</script>

<style>

</style>